<template>
  <div class="position-container">
    <xl-search-form :formItems="formItems" @search="search"></xl-search-form>
    <xl-table
      :columns="columns"
      :action="loadData"
      :actionParams="{ page: 1, size: 999 }"
      :treeProps="{ children: 'children' }"
      :showPagination="false"
      rowKey="id"
      ref="xlTableRef"
    >
      <template slot="top">
        <el-button type="primary" size="small" style="margin-bottom: 10px" @click="dialogVisible = true">新增职位</el-button>
      </template>
      <template slot="hot" slot-scope="{ row }">
        <i class="el-icon-success" style="color: #67c23a" v-if="row.hot === 1"></i>
      </template>
      <template slot="enableStatus" slot-scope="{ row }">
        <span style="color: #67c23a" v-if="row.enableStatus === 1">启用</span>
        <span style="color: #f56c6c" v-else>禁用</span>
      </template>
      <template slot="action" slot-scope="{ row }">
        <el-button type="text" @click="handleEditPosition(row)">编辑</el-button>
      </template>
    </xl-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" @close="resetForm('positionFormRef')">
      <el-form ref="positionFormRef" :model="positionForm" :rules="rules" label-width="120px" size="small">
        <el-form-item label="父级分类" prop="pid">
          <el-select v-model="positionForm.pid" :disabled="disabled" placeholder="请选择">
            <el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="positionForm.name" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="启用状态" prop="enableStatus">
          <el-radio-group v-model="positionForm.enableStatus">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="热门职位" prop="hot" v-show="positionForm.pid !== 0">
          <el-radio-group v-model="positionForm.hot">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit('positionFormRef')">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { columns, formItems } from './const'
import { getPositionList, createPosition, updatePosition } from '@/api/position'

export default {
  name: 'PositionIndex',
  data() {
    return {
      columns,
      formItems,
      dialogTitle: '新增职位',
      dialogVisible: false, // 对话框状态
      positionId: null, // 职位ID
      positionList: [], // 父级职位列表
      disabled: false, // 禁用父级分类选择
      positionForm: {
        pid: null,
        name: '',
        enableStatus: 1,
        hot: 0
      }, // 职位表单
      rules: {
        pid: { required: true, trigger: 'blur', message: '请选择职位分类' },
        name: { required: true, trigger: 'blur', message: '请输入职位名称' }
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getPositionList({ page: 1, size: 99, pid: 0 })
      if (res.code === 200) {
        this.positionList = [{ id: 0, name: '无父级分类' }]
        this.positionList.push(...res.data.list)
      }
    },
    // 编辑
    handleEditPosition(row) {
      this.positionForm = { ...row }
      this.positionId = row.id
      if (row.pid === 0) {
        this.disabled = true
      }
      this.dialogTitle = '编辑职位'
      this.dialogVisible = true
    },
    // 新增职位
    handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res
          let message

          // 父级职位不能设置热门
          if (this.positionForm.pid === 0) {
            this.positionForm.hot = 0
          }

          if (this.positionId !== null) {
            res = await updatePosition(this.positionForm)
            message = '更新成功'
          } else {
            res = await createPosition(this.positionForm)
            message = '添加成功'
          }

          if (res.code === 200) {
            this.$message.success(message)
            this.dialogVisible = false
            this.$refs['xlTableRef'].loadData()
          }
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
      this.dialogTitle = '编辑职位'
      this.positionId = null
      this.disabled = false
      this.positionForm = {
        pid: null,
        name: '',
        enableStatus: 1,
        hot: 0
      }
    },
    search(params) {
      this.$refs['xlTableRef'].loadData(params)
    },
    loadData(params) {
      return getPositionList(params)
    }
  }
}
</script>

<style lang="scss" scoped></style>
